<template>
  <el-dialog title :visible.sync="value" width="width" :before-close="cancel">
    <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题" prop="title">
            <el-input v-model="dialogForm.title" size="small" placeholder="请输入标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="type">
            <el-select size="small" v-model="dialogForm.type" placeholder="请选择消息类型">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发送方式" prop="sendStatus">
            <el-select size="small" v-model="dialogForm.sendStatus" placeholder="请选择发送方式">
              <el-option
                v-for="item in sendStatusOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dialogForm.sendStatus === 2">
          <el-form-item label="发送时间" prop="sendTime">
            <div class="block">
              <el-date-picker
                size="small"
                v-model="dialogForm.sendTime"
                type="datetime"
                placeholder="选择日期时间"
              ></el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="发送内容" prop="sendTime">
            <el-input type="textarea" v-model="dialogForm.content" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveNotice } from "@/api/notice";
export default {
  name: "noticeAddAndUpdate",
  props: {
    value: Boolean
  },
  data() {
    return {
      dialogForm: {
        title: "",
        type: 1,
        sendStatus: 1,
        content: "",
        noticeUser: [
          {
            userId: 2,
            userName: "管理员"
          }
        ]
      },
      rules: {},
      typeOptions: [
        { id: 1, label: "系统通知" },
        { id: 2, label: "短信通知" },
        { id: 3, label: "邮件通知" }
      ],
      sendStatusOptions: [
        { id: 1, label: "普通发送" },
        { id: 2, label: "定时发送" }
      ]
    };
  },
  methods: {
    submit() {
      this.$refs["dialogForm"].validate(async isOk => {
        if (isOk) {
          if (this.id) {
          } else {
            await saveNotice({ ...this.dialogForm, status: 0 });
          }
          // 重新刷新数据
          this.$emit("refresh");
        }
      });
    },
    cancel() {
      this.$refs["dialogForm"].resetFields();
      this.$emit("input", false);
    }
  }
};
</script>

<style>
</style>